<template>
  <div>

    <!--list-type="picture-card" 
    这种是正方形显示
     -->
    <!-- list-type="picture" 
     这种是长方形显示
     -->
    <el-upload action="#"
               :file-list="fileList"
               :limit="limit"
               :on-preview="onPreview"
               :on-remove="onRemove"
               :on-change="onChange"
               :before-upload="beforeUpload"
               :http-request="httpRequest"
               list-type="picture"
               :class="{ disabled: fileList.length === limit }">
      <el-button size="small"
                 type="primary">点击上传</el-button>
    </el-upload>
    <el-progress v-if="percentageShow"
                 :percentage="percentageNum"
                 style="width: 180px"></el-progress>
    <el-dialog title="预览"
               :visible.sync="showImageDialog">
      <img :src="showImgUrl"
           style="width: 100%"
           alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { uploadImg } from "@/api/permission/userinfo";
export default {
  name: "ImageUpload",
  props: {
    limit: {
      type: Number,
      default: 1,
    },
    pic: {
      type: String,
    },
  },
  data () {
    return {
      showImgUrl: "",
      showImageDialog: false,
      fileList: [
        // {name: 'aaa', url: 'https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg'},
        // {name: 'bbb', url:'https://img.sj33.cn/uploads/allimg/201101/20110124212832961.jpg'}
      ],
      currentUid: null,
      percentageNum: 0,
      percentageShow: false,
      img: "",
    };
  },
  created () {
    if (this.pic) {
      this.fileList.push({
        name: "aaa",
        url: 'http://124.223.14.236:7005/' + this.pic,
      });
    }
  },
  methods: {
    // 图片预览的时候
    onPreview (file) {
      this.showImgUrl = file.url;
      this.showImageDialog = true;
    },
    // 图片移除钩子函数
    onRemove (file, fileList) {
      // file 是删除的图片信息 fileList剩余的图片
      this.fileList = fileList;
    },
    // 文件改变的时候 1. 添加文件 2.上传成功或者失败都调用
    onChange (file, fileList) {
      // console.log(file);
      // ready 的时候 fileList 其实多了一个元素 【本地预览的地址】
      // fail 的时候 fileList 会被刚才成功的移除了
      // success 的时候 fileList 其实多了一个元素 【真是的线上地址】
      console.log("文件改变的时候", file.status);
      this.fileList = fileList;
    },
    // 上传之前的检查钩子
    beforeUpload ({ size, type, uid }) {
      // 检测大小
      const maxSize = 10;
      if (size > 1024 * 1024 * maxSize) {
        this.$message.warning(`体积不允许超过${maxSize}`);
        return false;
      }
      // 检测类型
      const types = ["image/jpeg", "image/gif", "image/jpg"];
      if (!types.includes(type)) {
        this.$message.warning("格式不正确");
        return Promise.reject();
      }
      this.currentUid = uid;
      this.percentageShow = true;
      // 通过就是true
      return true;
    },
    async httpRequest (data) {
      // 使用第三方就直接调用接口data.file
      // 【1】.

      //   ——————————————————————————————————————————————————————————————————————————————————————-
      // 【2】.如果是自己服务器就使用下面方法处理图片
      // 这个data里面就有所有图片的信息，最重要的就是里面的file属性
      console.log(data);
      let fd = new FormData();
      fd.append("file", data.file);
      // 这里是上传请求接口
      // savePath是返回的上传的图片
      let { url } = await uploadImg(fd);
      // 将图片添加到fileList里去，就可以在打开时默认显示图片了
      // 上传接口是不带前缀的
      console.log(url);
      this.img = url;
      this.$emit("uploading", url);
      this.percentageShow = false;
      // this.fileList.push({
      //   name: 'name',
      //   // process.env.VUE_APP_WebURL是环境变量里的http头
      //   url: process.env.VUE_APP_WebUrl + url,
      // });
    },
  },
};
</script>

<style lang="scss">
.disabled {
  .el-upload {
    display: none;
  }
}
</style>